<template>
  <div>
    <div class="detail-header">
      <span class="icon-back" @click="toback">&#xe600;</span>
      <div class="search">
        <span class="search-icon">&#xe752;</span>
        <input type="text" placeholder="金龙大酒店" class="search-input" />
      </div>
    </div>
    <div class="shop">
      <div class="shop-item">
        <div class="shop-item-icon">
          <img />
        </div>
        <div class="shop-item-info">
          <ul>
            <li style="margin: 0;">
              <h2>沃尔玛</h2>
            </li>
            <li>月售你妈的1000万+ 送到你母亲家</li>
            <li style="color:red;">办了vip我他妈的倒贴你100万</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="detail-list">
      <div class="detail-list-nav" @click="selected($event)" ref="nav">
        <div class="detail-list-nav-item">全部商品</div>
        <div class="detail-list-nav-item">全部商品</div>
        <div class="detail-list-nav-item">全部商品</div>
        <div class="detail-list-nav-item">全部商品</div>
        <div class="detail-list-nav-item">全部商品</div>
      </div>
      <div class="detail-list-right">
        <div class="detail-list-right-item" v-for="item in mallList">
          <div class="item-pic"></div>
          <div class="item-intro">
            <h2>{{ item.name }}</h2>
            <h4>月售100</h4>
            <div class="item-intro-bot">
              <div class="item-intro-bot-price">￥{{ item.price }}</div>
              <div class="item-intro-bot-amount">
                <button @click="des(item)">-</button>
                <span>{{ item.amount }}</span>
                <button @click="add(item)">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="total" style="z-index: 99;">
      <div ref="slider" v-show="slideState" class="total-slider animate__animated"></div>
      <div class="total-bot">
        <div class="total-bot-icon" @click="slideInUp">
          <span>{{ sumAmount }}</span>
          &#xe610;
        </div>
        <div class="total-bot-price">总计：￥{{ total }}</div>
        <div class="total-bot-btn">去结算</div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>

import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
onMounted(() => {
  console.log(location.hash);
})

const router = useRouter()
const nav = ref(null)
const toback = () => {
  router.back()
}
const total = computed(() => {

  return mallList.reduce((pre, cur) => {
    return pre + cur.price * cur.amount
  }, 0)
})
const sumAmount = computed(() => {
  return mallList.reduce((pre, cur) => {
    return pre + cur.amount
  }, 0)
})
const des = (item) => {
  if (item.amount <= 0) {
    return
  }
  item.amount--
}
const add = (item) => {
  if (item.amount >= 99) {
    return
  }
  item.amount++
}
const mallList = reactive([
  { name: "番茄", price: 30, amount: 0 },
  { name: "菠萝", price: 40, amount: 0 },
  { name: "提子", price: 20, amount: 0 },
  { name: "香橙", price: 60, amount: 0 }
])
const selected = (e) => {
  for (let item of nav.value.children) {
    item.style.backgroundColor = 'rgb(245, 245, 245)'
  }
  e.target.style.backgroundColor = '#fff'
}
const slider = ref(null)
const slideState = ref(false)
const slideInUp = () => {
  slider.value.className = 'total-slider animate__animated'
  if (!slideState.value) {
    slider.value.className += ' animate__slideInUp'
    slideState.value = true
  } else {
    slider.value.className += ' animate__slideOutDown'
    setTimeout(() => {
      slideState.value = false
    }, 800)
  }

}
</script>
<style lang='scss' scoped>
// ----------------

// -------------
.detail-header {
  .icon-back {
    position: absolute;
    left: 15rem;
    top: 9rem;
    font-family: iconfont;
    font-size: 25rem;
    color: rgb(205, 205, 205);
  }
  .search {
    font-family: iconfont;
    height: 35rem;
    width: 90vw;
    margin: 0 auto;
    margin-top: 5rem;
    border-radius: 20rem;
    background-color: rgb(244, 244, 244);
    text-align: center;
    line-height: 35rem;
    transform: translateX(15rem) scale(0.95);

    &-icon {
      font-size: 20rem;
    }
    &-input {
      margin: 0 20rem 0 5rem;
      transform: translateY(-2rem);
      line-height: 30rem;
      height: 30rem;
      width: 70vw;
      border: 0;
      outline: none;
      background-color: rgb(244, 244, 244);
    }
  }
}

.shop {
  width: 90vw;
  margin: 10rem auto;
  &-item {
    height: 100rem;
    display: flex;
    border-bottom: 1rem solid #ddd;
    padding-top: 10rem;
    &-icon {
      width: 70rem;
      height: 100%;
      img {
        width: 70rem;
        height: 70rem;
        border-radius: 50%;
      }
    }
    &-info {
      flex: 1;
      padding-left: 10rem;
      ul {
        li {
          margin: 10rem 0;
        }
      }
    }
  }
}

.detail-list {
  display: flex;
  height: 50vh;
  background-color: #ddd;
  &-nav {
    width: 25vw;
    height: 60vh;
    &-item {
      height: 40rem;
      text-align: center;
      line-height: 40rem;
      font-size: 14rem;
      background-color: rgb(245, 245, 245);
    }
  }
  &-right {
    flex: 1;
    border: 2px solid black;
    &-item {
      height: 80rem;
      background-color: yellow;
      display: flex;
      margin-top: 3rem;
      .item-pic {
        width: 80rem;
        height: 80rem;
        background-color: red;
      }
      .item-intro {
        flex: 1;
        height: 100%;
        &-bot {
          display: flex;
          margin-top: 5rem;
          &-amount {
            margin-left: 20rem;
            button {
              height: 25rem;
              width: 25rem;
              border-radius: 50%;
              border: 0;
            }
          }
        }
      }
    }
  }
}

.total {
  &-bot {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50rem;
    width: 100vw;
    display: flex;
    &-icon {
      width: 80rem;
      font-family: iconfont;
      font-size: 30rem;
      text-align: center;
      line-height: 50rem;
      position: relative;
      color: rgb(88, 183, 255);
      span {
        line-height: 17rem;
        font-size: 5rem;
        display: inline-block;
        width: 17rem;
        height: 17rem;
        border-radius: 50%;
        background-color: red;

        color: white;
        position: absolute;
        right: 10rem;
        top: 5rem;
      }
    }
    &-price {
      flex: 1;
      font-size: 18rem;
      line-height: 50rem;
    }
    &-btn {
      width: 100rem;
      background-color: rgb(79, 176, 249);
      font-size: 18rem;
      color: white;
      line-height: 50rem;
      text-align: center;
    }
  }
  &-slider {
    z-index: 1;
    height: 120rem;
    width: 100vw;
    background-color: bisque;
  }
}
</style>